<template>
  <div class="table-tools-column">
    <!-- 按钮组 -->
    <receipt-table-btn-group></receipt-table-btn-group>
  </div>
  <el-table
    :data="
      tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
    "
    :default-sort="defaultSort"
    @selection-change="selectChange"
    @sort-change="sortChange"
    stripe
  >
    <!-- 选择框 -->
    <el-table-column
      align="center"
      type="selection"
      width="55"
      fixed
    ></el-table-column>
    <!-- 序号 -->
    <el-table-column
      align="center"
      type="index"
      label="序号"
      width="60"
    ></el-table-column>
    <!-- 数据列 -->
    <!--ID列-->
    <!--    <el-table-column align="center"-->
    <!--      prop="id"-->
    <!--      label="ID"-->
    <!--      width="100"-->
    <!--      min-width="60"-->
    <!--      :formatter="dataFormat"-->
    <!--      sortable="custom"-->
    <!--      fit-->
    <!--    >-->
    <!--    </el-table-column>-->
    <!--作废状态-->
    <el-table-column
      align="center"
      prop="invalid"
      label="状态"
      width="100"
      min-width="60"
      :formatter="dataFormat"
      sortable="custom"
      fit
    >
    </el-table-column>
    <!--no列-->
    <el-table-column
      align="center"
      prop="no"
      label="编码"
      width="200"
      min-width="200"
      :formatter="dataFormat"
      sortable="custom"
      fit
    >
    </el-table-column>
    手写编码列
    <el-table-column
      align="center"
      prop="noHand"
      label="手写编号"
      width="200"
      min-width="200"
      :formatter="dataFormat"
      sortable="custom"
      fit
    >
    </el-table-column>
    <!--名称列-->
    <el-table-column
      align="center"
      prop="name"
      label="名称"
      width="200"
      min-width="200"
      :formatter="dataFormat"
      sortable="custom"
      fit
    >
    </el-table-column>
    <!--idJson列展开-->
    <template v-for="(tableField, key) in receiptsTableFieldList" :key="key">
      <el-table-column
        align="center"
        :prop="tableField.filedName"
        :label="tableField.label"
        :width="tableField.width"
        :min-width="tableField.minWidth"
        :formatter="dataFormat"
        sortable="custom"
        fit
      >
      </el-table-column>
    </template>
    <!--备注-->
    <el-table-column
      align="center"
      prop="remark"
      label="备注"
      width="300"
      min-width="200"
      :formatter="dataFormat"
      sortable="custom"
      fit
    >
    </el-table-column>
    <el-table-column
      align="center"
      prop="createUser"
      label="创建人"
      width="200"
      min-width="200"
      :formatter="dataFormat"
      sortable="custom"
      fit
    >
    </el-table-column>
    <!--创建人-->
    <el-table-column
      align="center"
      prop="createGmt"
      label="创建时间"
      width="220"
      min-width="200"
      :formatter="dataFormat"
      sortable="custom"
      fit
    >
    </el-table-column>
    <!--创建时间-->
    <el-table-column
      align="center"
      prop="modifiedUser"
      label="修改人"
      width="200"
      min-width="200"
      :formatter="dataFormat"
      sortable="custom"
      fit
    >
    </el-table-column>
    <!--修改人-->
    <el-table-column
      align="center"
      prop="modifiedGmt"
      label="修改时间"
      width="220"
      min-width="200"
      :formatter="dataFormat"
      sortable="custom"
      fit
    >
    </el-table-column>
    <!--修改时间-->
    <el-table-column
      align="center"
      label="操作"
      :width="fixedFuncBtn.width"
      fixed="right"
      fit
    >
      <template #default="scope">
        <template v-if="props.editBtnVisible">
          <el-button
            type="text"
            size="small"
            icon="edit"
            @click.prevent="
              setSubmitFunctionType('update');
              setFormInitValue(scope.row);
              changeSubmitFormDialogVisible();
            "
            >编辑
          </el-button>
        </template>
        <!--        可被每行不同数据控制的编辑按钮-->
        <template v-if="isEditVisible(scope.row.approveStatus)">
          <el-button
            type="text"
            size="small"
            icon="edit"
            @click.prevent="
              setSubmitFunctionType('update');
              setFormInitValue(scope.row);
              changeSubmitFormDialogVisible();
            "
            >编辑
          </el-button>
        </template>

        <template v-if="props.detailBtnVisible">
          <el-button
            type="text"
            size="small"
            icon="ChatLineSquare"
            @click.prevent="
              setSubmitFunctionType('detail');
              setFormInitValue(scope.row);
              changeDetailFormDialogVisibleValue();
            "
            >详情
          </el-button>
        </template>
        <template v-if="isSubmitVisible(scope.row.approveStatus)">
          <el-popconfirm
            confirm-button-text="提交"
            cancel-button-text="取消"
            icon="TopRight"
            icon-color="blue"
            title="您确认提交，请求审批吗?"
            @confirm="submitRecord(scope.row)"
          >
            <template #reference>
              <el-button type="text" size="small" icon="TopRight"
                >提交
              </el-button>
            </template>
          </el-popconfirm>
        </template>
        <template v-if="isApproveVisible(scope.row.approveStatus)">
          <el-popconfirm
            confirm-button-text="通过"
            cancel-button-text="拒绝"
            icon="Check"
            icon-color="blue"
            title="请选择您的审批结果?"
            @confirm="agreeRecord(scope.row)"
            @cancel="rejectRecord(scope.row)"
          >
            <template #reference>
              <el-button type="text" size="small" icon="Check">审批</el-button>
            </template>
          </el-popconfirm>
        </template>
      </template>
    </el-table-column>
  </el-table>
  <div class="table-suffix-tool">
    <el-pagination
      style="float: right"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      :page-sizes="[5, 10, 15, 20, 50]"
      :default-page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
  <receipt-table-submit-form-dialog>
    <template #submitDialogSlot>
      <slot name="submitForm"></slot>
    </template>
  </receipt-table-submit-form-dialog>
  <receipt-table-search-form-dialog>
    <template #searchDialogSlot>
      <slot name="searchForm"></slot>
    </template>
  </receipt-table-search-form-dialog>
  <receipt-table-upload-dialog
    v-model="uploadDialogVisible"
    @submit-json-format="submitJsonFormat"
  >
    <template #uploadDialogSlot>
      <slot name="uploadDialogContent"></slot>
    </template>
  </receipt-table-upload-dialog>
  <receipt-table-detail-form-dialog>
    <template #detailFormDialogSlot>
      <slot name="detailFormDialog"></slot>
    </template>
  </receipt-table-detail-form-dialog>
  <order-receipt-sub-details-dialog>
    <template #submitDialogSlot>
      <slot name="subDetails"></slot>
    </template>
  </order-receipt-sub-details-dialog>
</template>

<script lang="ts" setup>
import {
  withDefaults,
  defineProps,
  defineEmits,
  provide,
  defineExpose,
  inject,
  ref,
} from "vue";

import { FixedFuncBtn, TableField, TableUrl } from "@/models/TableSetting";

import TableData from "@/components/receipt/ReceiptTableData";
import OrderReceiptSubDetailsDialog from "@/components/receipt/OrderReceiptSubDetailsDialog.vue";
import ReceiptTableSubmitFormDialog from "@/components/receipt/ReceiptTableSubmitFormDialog.vue";
import ReceiptSubmitForm from "@/components/receipt/ReceiptTableSubmitForm";
import Pagination from "@/components/receipt/ReceiptTablePagination";
import TableSort from "@/components/receipt/ReceiptTableSort";
import TableSelect from "@/components/receipt/ReceiptTableSelect";
import ReceiptTableUploadDialog from "@/components/receipt/ReceiptTableUploadDialog.vue";
import UploadDialogEvent from "@/components/receipt/ReceiptTableUpload";
import ReceiptTableDetailFormDialog from "@/components/receipt/ReceiptTableDetailFormDialog.vue";
import DetailForm from "@/components/receipt/ReceiptTableDetailForm";
import ReceiptTableBtnGroup from "@/components/receipt/ReceiptTableBtnGroup.vue";
import ReceiptTableSearchFormDialog from "@/components/receipt/ReceiptTableSearchFormDialog.vue";
import ReceiptSearchForm from "@/components/receipt/ReceiptTableSearchForm";
import { Receipts } from "@/models/Receipts";
import ReceiptTableApprove from "@/components/receipt/ReceiptTableApprove";

export interface BaseTableProp {
  url: TableUrl;
  tableFieldList: Array<TableField>;
  submitForm: Record<string, unknown>;
  searchForm: Record<string, unknown>;
  submitFormWidth?: string;
  submitFormTitle?: string;
  fixedFuncBtn?: FixedFuncBtn;
  detailBtnVisible?: boolean;
  editBtnVisible?: boolean;
  approveName: string;
  detailFormDialog?: {
    title: string;
    width: string;
  };
}

const props = withDefaults(defineProps<BaseTableProp>(), {
  url: () => {
    return {
      refreshUrl: "",
      modifyingSingleUrl: "",
      deleteUrl: "",
      invalidUrl: "",
    } as TableUrl;
  },
  tableFieldList: () => {
    return {} as Array<TableField>;
  },
  submitForm: () => {
    return {};
  },
  submitFormWidth: "50%",
  submitFormTitle: "测试",
  fixedFuncBtn: () => {
    return { width: 120, button: [] } as FixedFuncBtn;
  },
  detailBtnVisible: false,
  editBtnVisible: true,
  approveName: "",
  detailFormDialog: () => {
    return {
      title: "单据详情",
      width: "50%",
    };
  },
});
provide("props", props);

const emit = defineEmits<{
  (
    e: "data-format",
    columnName: string,
    cellValue: string,
    callback: (value: string) => void
  ): void;
  (
    e: "set-form-init-value",
    formType: string,
    row: Record<string, unknown>
  ): void;
  (e: "submit-valid", callback: (value: boolean) => void): void;
  (
    e: "json-format",
    data: Record<string, unknown>[][],
    callback: (value: Record<string, unknown>[]) => void
  ): void;
}>();

//idJson展示列
const receiptsTableFieldList = inject("receiptsTableFieldList");

// 表格数据、 表格数据获取方法、 表格数据规范化、 基本搜索.
const { tableData, getRecord, dataFormat } = TableData(props, emit);

// 获取数据(以默认搜索条件来获取数据)
const receipts = ref({} as Receipts);
receipts.value.invalid = "正常";
const curDate = new Date();
curDate?.setTime(curDate.getTime() - 24 * 60 * 60 * 1000 * 30);
receipts.value.modifiedGmtStart = curDate;
getRecord(props.url.searchUrl, receipts.value);

// 表格分页
const { pageSize, currentPage, handleSizeChange, handleCurrentChange } =
  Pagination();

// 表排序
const { defaultSort, sortChange } = TableSort(tableData);

// 数据新增、编辑.
const {
  changeSubmitFormDialogVisible,
  setSubmitFunctionType,
  setFormInitValue,
} = ReceiptSubmitForm(props, emit, getRecord);

// 控制编辑、提交、审批按钮显示的事件
const isSubmitVisible = inject("isSubmitVisible") as (
  approveStatus: string
) => void;
const isApproveVisible = inject("isApproveVisible") as (
  approveStatus: string
) => void;
const isEditVisible = inject("isEditVisible") as (
  approveStatus: string
) => void;
// 搜索ts文件引入
ReceiptSearchForm();

/**
 * 详情窗口
 */
const { changeDetailFormDialogVisibleValue } = DetailForm();

// 批量删除
const { selectChange } = TableSelect(props, getRecord);

// 审批
const { submitRecord, agreeRecord, rejectRecord } = ReceiptTableApprove(
  props,
  getRecord
);

// 引入上传所用到的事件和方法
const { uploadDialogVisible } = UploadDialogEvent();
const submitJsonFormat = (
  data: Record<string, unknown>[][],
  callback: (value: Record<string, unknown>[]) => void
) => {
  let newValue: Record<string, unknown>[] = [];
  emit("json-format", data, (value: Record<string, unknown>[]) => {
    newValue = value;
  });
  callback(newValue);
};
/**
 * 暴露数据给父组件
 */
defineExpose({
  tableData,
});
</script>

<style scoped>
.table-suffix-tool {
  background: #ffffff;
  height: 50px;
  width: 100%;
  padding-top: 10px;
}
</style>
